<template>
  <div class="content">
    <ul class="chooseImg">
      <li class="chooseImg1">
        <img :src="pics[0]" id="s" alt="剪刀" @click="act(0, 2, 1, 0)" />
      </li>
      <li class="chooseImg2">
        <img :src="pics[1]" id="st" alt="石头" @click="act(1, 0, 2, 1)" />
      </li>
      <li class="chooseImg3"><img :src="pics[2]" id="c" alt="布" @click="act(2, 1, 0, 2)" /></li>
    </ul>
   <img class="person" :src="personSrc"/>
    <img class="computer" :src="cmSrc"/>
    <!-- <div id="info" class="gameIntro">
      <div class="gameIntroWrapper">
        <h1 class="bold">游戏说明</h1>
        <p class="text">
          点击石头、剪刀、布，与机器战斗，消灭病毒，拯救蕾姆酱，快来开始您的游戏吧！
        </p>
      </div>
      <span id="close" class="close">x</span>
    </div> -->
    <div id="virusGroup" class="virus-wrap">
      <img class="virus" :src="virus" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pics: ['./img/scissors.png', './img/stone.png', './img/cloth.png'],
      virus: './img/virus.png',
      sumTimes: 0,
      sumsuss: 0,
      sumfail: 0,
      sumtied: 0,
      range: [0.33, 0.67],
      msg: [
        '真棒，少了一个病毒呢，蕾姆酱越来越安全啦',
        '啊，又多了一个病毒！蕾姆酱害怕！',
        '病毒还是这么多呢，蕾姆害怕，尼酱',
        '',
      ],
      personSrc: '',
      cmSrc: ''
    };
  },
  methods: {
    // 结果统计
    add(ab) {
      const virusGroup = document.querySelector('#virusGroup');
      const virus = document.querySelector('.virus');

      if (virusGroup.length > 20) {
        return;
      }

      this.sumTimes += 1;

      if (ab === '02' || ab === '10' || ab === '21') {
        this.sumsuss += 1;
        if (virusGroup.length > 0) {
          virusGroup.removeChild(virusGroup.lastChild);
        }
        if (!document.querySelectorAll('.virus').length) {
          console.log('尼酱真棒呢！蕾姆重获健康之身啦！');
        }
      }

      if (ab === '00' || ab === '11' || ab === '22') {
        this.sumfail += 1;
        console.log('你输了：', this.sumfail);
      }

      if (ab === '01' || ab === '12' || ab === '20') {
        const img = document.createElement('img');
        img.classList.add('virus');
        img.style = `position: absolute;
          width: 6.25rem;
          height: 3.125rem;
          left: ${this.getRandomInt(10, window.innerWidth)}px;
          top: ${this.getRandomInt(50, window.innerHeight)}px;
          animation: playY 4s steps(4) infinite;`;
        img.src = this.virus;
        if (document.querySelectorAll('.virus').length > 10) {
          console.log('病毒太多啦，蕾姆害怕尼酱');
        }
        this.sumtied += 1;
        virusGroup.appendChild(img);
      }

      const rate = (this.sumsuss / this.sumTimes) * 100;
      console.log('胜率：', rate);
      // sumd.innerHTML = `${String(rate.toFixed(2))}%`;
    },

    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; // 不含最大值，含最小值
    },

    act(nSrc) {
      // @param
      // nSrc: 玩家图片索引
      // aNum, bNum, cNum: 结果索引
      const rd = Math.random();

      this.personSrc = this.pics[nSrc];

      if (rd < this.range[0]) {
        this.cmSrc = this.pics[0];
        // result.innerHTML = this.msg[aNum];
        this.add(String(nSrc) + String(0));
      } else if (rd < this.range[1]) {
        this.cmSrc = this.pics[1];
        // result.innerHTML = this.msg[bNum];
        this.add(String(nSrc) + String(1));
      } else {
        this.cmSrc = this.pics[2];
        // result.innerHTML = this.msg[cNum];
        this.add(String(nSrc) + String(2));
      }
    },
  },
};
</script>

<style lang="less" scoped>
/* 内容自适应*/
.content {
  width: 60%;
  height: 100%;
  padding: 1.25rem;
  margin: auto;
}

/*图片包裹层，去除ul前面的小圆点，使包裹层内的项目水平分布*/
.chooseImg {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-content: center;
  li {
    margin: 0;
    img {
      width: 100%;
      height: 100%;
    }
    &:hover {
      filter: brightness(0.7);
    }
  }
}

.person,.computer {
  position: absolute;
  bottom: 50%;
  width: 6.25rem;
  height: 5rem;
}

.person {
  left: 10%;
}

.computer {
  right: 10%;
}

.virus-wrap {
  width: 100%;
}

.virus {
  position: absolute;
  width: 6.25rem;
  height: 3.125rem;
  animation: playY 4s steps(4) infinite;
}

@keyframes playY {
  from {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(20px);
  }
  30% {
    transform: translateY(40px);
  }
  50% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(40px);
  }
  80% {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}
</style>
